<template>
  <div class="max-w-3xl mx-auto bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">啤酒颜色转换器</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500">
        <p>在SRM、EBC和Lovibond之间转换啤酒颜色值，并提供视觉颜色参考。</p>
      </div>

      <!-- 单位选择 -->
      <div class="mt-4">
        <div class="flex items-center space-x-4">
          <span class="text-sm text-gray-700">输入单位:</span>
          <div class="flex items-center space-x-2">
            <button
              v-for="scale in ['SRM', 'EBC', 'Lovibond']"
              :key="scale"
              @click="selectedScale = scale"
              :class="[
                'px-3 py-1.5 text-sm font-medium rounded-md',
                selectedScale === scale
                  ? 'bg-brew-amber text-white'
                  : 'text-gray-700 bg-gray-100 hover:bg-gray-200'
              ]"
            >
              {{ scale }}
            </button>
          </div>
        </div>
      </div>

      <!-- 颜色值输入 -->
      <div class="mt-6">
        <label :for="selectedScale.toLowerCase()" class="block text-sm font-medium text-gray-700">
          {{ selectedScale }} 值
        </label>
        <div class="mt-1 relative rounded-md shadow-sm">
          <input
            :id="selectedScale.toLowerCase()"
            type="number"
            v-model="colorValue"
            :step="0.1"
            :min="0"
            class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
            :placeholder="getPlaceholder()"
            @input="updateColors"
          >
          <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <span class="text-gray-500 sm:text-sm">{{ selectedScale }}</span>
          </div>
        </div>
      </div>

      <!-- 颜色预览 -->
      <div class="mt-6">
        <div class="rounded-lg overflow-hidden border border-gray-200">
          <div class="p-4" :style="{ backgroundColor: beerColor }">
            <div class="h-20 rounded-lg border-2 border-white bg-transparent"></div>
          </div>
        </div>
      </div>

      <!-- 转换结果 -->
      <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div class="rounded-lg bg-gray-50 p-4">
          <h4 class="text-sm font-medium text-gray-900">SRM</h4>
          <p class="mt-1 text-2xl font-semibold text-gray-700">{{ results.srm }}</p>
        </div>
        <div class="rounded-lg bg-gray-50 p-4">
          <h4 class="text-sm font-medium text-gray-900">EBC</h4>
          <p class="mt-1 text-2xl font-semibold text-gray-700">{{ results.ebc }}</p>
        </div>
        <div class="rounded-lg bg-gray-50 p-4">
          <h4 class="text-sm font-medium text-gray-900">°Lovibond</h4>
          <p class="mt-1 text-2xl font-semibold text-gray-700">{{ results.lovibond }}</p>
        </div>
      </div>

      <!-- 啤酒风格参考 -->
      <div class="mt-6">
        <h4 class="text-sm font-medium text-gray-900">常见啤酒风格颜色参考 (SRM)</h4>
        <div class="mt-2 grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div v-for="(styles, category) in beerStyles" :key="category" class="space-y-2">
            <h5 class="text-sm font-medium text-gray-700">{{ category }}</h5>
            <ul class="space-y-2 text-sm text-gray-600">
              <li v-for="style in styles" :key="style.name" class="flex items-center space-x-2">
                <div class="flex-1">
                  <div class="flex justify-between">
                    <span>{{ style.name }}</span>
                    <span>{{ style.srm }}</span>
                  </div>
                  <div class="mt-1 flex rounded-md overflow-hidden h-6">
                    <template v-if="style.srm.includes('-')">
                      <div
                        class="flex-1"
                        :style="{
                          background: `linear-gradient(to right, ${getSrmColor(parseFloat(style.srm.split('-')[0]))}, ${getSrmColor(parseFloat(style.srm.split('-')[1]))})`
                        }"
                      ></div>
                    </template>
                    <template v-else-if="style.srm.includes('+')">
                      <div
                        class="flex-1"
                        :style="{
                          background: `linear-gradient(to right, ${getSrmColor(parseFloat(style.srm.replace('+', '')))}, ${getSrmColor(100)})`
                        }"
                      ></div>
                    </template>
                    <template v-else>
                      <div
                        class="flex-1"
                        :style="{ backgroundColor: getSrmColor(parseFloat(style.srm)) }"
                      ></div>
                    </template>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 转换公式说明 -->
      <div class="mt-6">
        <h4 class="text-sm font-medium text-gray-900">转换公式</h4>
        <div class="mt-2 text-sm text-gray-500 space-y-1">
          <p>EBC = SRM × 1.97</p>
          <p>SRM = EBC × 0.508</p>
          <p>SRM ≈ °Lovibond × 1.04</p>
          <p>°Lovibond ≈ SRM × 0.96</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const selectedScale = ref('SRM')
const colorValue = ref('')
const results = ref({
  srm: '0.0',
  ebc: '0.0',
  lovibond: '0.0'
})

// 啤酒风格参考数据
const beerStyles = {
  '淡色啤酒': [
    { name: '美式淡色拉格', srm: '2-3' },
    { name: '德式皮尔森', srm: '2-5' },
    { name: '比利时小麦啤酒', srm: '2-4' },
    { name: '科隆啤酒', srm: '3-4' }
  ],
  '中等色啤酒': [
    { name: '维也纳拉格', srm: '8-12' },
    { name: '美式琥珀艾尔', srm: '10-17' },
    { name: '英式苦啤酒', srm: '6-14' },
    { name: '德式马尔岑', srm: '8-17' }
  ],
  '深色啤酒': [
    { name: '波特', srm: '20-40' },
    { name: '世涛', srm: '35-80' },
    { name: '德式黑啤', srm: '17-30' },
    { name: '比利时修道院双料', srm: '10-17' }
  ]
}

// 获取占位符示例值
function getPlaceholder() {
  switch (selectedScale.value) {
    case 'SRM': return '4.0'
    case 'EBC': return '8.0'
    case 'Lovibond': return '3.8'
    default: return '0.0'
  }
}

// 颜色转换函数
function srmToEbc(srm) {
  return srm * 1.97
}

function ebcToSrm(ebc) {
  return ebc * 0.508
}

function srmToLovibond(srm) {
  return srm * 0.96
}

function lovibondToSrm(lovibond) {
  return lovibond * 1.04
}

// 更新所有颜色值
function updateColors() {
  if (!colorValue.value || isNaN(colorValue.value) || parseFloat(colorValue.value) < 0) {
    results.value = {
      srm: '0.0',
      ebc: '0.0',
      lovibond: '0.0'
    }
    return
  }

  const value = parseFloat(colorValue.value)
  let srm

  // 根据选择的单位计算SRM
  switch (selectedScale.value) {
    case 'EBC':
      srm = ebcToSrm(value)
      break
    case 'Lovibond':
      srm = lovibondToSrm(value)
      break
    default:
      srm = value
  }

  // 更新所有结果
  results.value = {
    srm: srm.toFixed(1),
    ebc: srmToEbc(srm).toFixed(1),
    lovibond: srmToLovibond(srm).toFixed(1)
  }
}

// SRM到颜色的映射函数
function getSrmColor(srm) {
  // 颜色映射表 - 调整深色啤酒的颜色映射
  const colors = [
    [2, '#FFE699'],
    [3, '#FFD878'],
    [4, '#FFCA5A'],
    [6, '#FFBF42'],
    [8, '#FBB123'],
    [10, '#F8A600'],
    [13, '#F39C00'],
    [17, '#EA8F00'],
    [20, '#E58500'],
    [24, '#DE7C00'],
    [29, '#D77200'],
    [35, '#CB6200'],
    [40, '#BC5500'],
    [50, '#B04500'],
    [60, '#8B3600'],
    [70, '#702C00'],
    [80, '#5C2400'],
    [90, '#4C1E00'],
    [100, '#3C1700']
  ]

  // 找到最接近的颜色
  for (let i = 0; i < colors.length; i++) {
    if (srm <= colors[i][0]) {
      return colors[i][1]
    }
  }
  return colors[colors.length - 1][1]
}

// 计算当前啤酒颜色
const beerColor = computed(() => {
  const srm = parseFloat(results.value.srm)
  return getSrmColor(srm)
})

// 监听输入变化
watch(colorValue, updateColors)
watch(selectedScale, () => {
  colorValue.value = ''
  updateColors()
})
</script>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style> 